<template>
  <div v-if="dialogShow" class="recommend">
    <c-section title="待选推荐型号">
      <c-table-box checkbox :table-config="tableConfig" :other-filters="othterFilters" @selection-change="selectionChange" />
      <!-- <div class="btn-container">
        <el-button type="primary">选择</el-button>
        <el-button type="primary">选择全部</el-button>
        <el-button type="primary">取消选择</el-button>
        <el-button type="primary">取消全部</el-button>
      </div> -->
    </c-section>
    <c-section title="已选推荐型号">
      <c-table-box :data="selections" no-request hide-func :table-config="tableConfig" />
      <div class="btn-container">
        <el-button type="primary">取消</el-button>
        <el-button type="primary" @click="clickNextStep">下一步</el-button>
      </div>
    </c-section>
  </div>
</template>
<script>
export default {
  name: 'PCFinishedConfigEditRecommend',
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: [String, Object],
      default: ''
    }
  },
  data() {
    return {
      selections: [],
      othterFilters: [],
      tableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/configSampleRecommend/queryAmbientRecommendModel`,
        setting: [
          {
            prop: 'modelCode',
            label: '型号'
          },
          {
            prop: 'categoryName',
            label: '品类'
          },
          {
            prop: 'seriesName',
            label: '产品系列'
          },
          {
            prop: 'recommendProgram',
            label: '所属方案'
          },
          {
            prop: 'proPosition',
            label: '产品定位'
          },
          {
            prop: 'recommendNum',
            label: '推荐数量'
          }
        ]
      }
    }
  },
  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  created() {
    this.formData = this.detailData
  },
  methods: {
    clickNextStep() {
      const equalArr = []
      const tmpArr = []
      this.selections.forEach(item => {
        const flag1 = tmpArr.every(t => (item.recommendProgram === t.recommendProgram && item.modelCode === t.modelCode && item.categoryCode === t.categoryCode))
        const flag2 = tmpArr.every(t => (item.recommendProgram !== t.recommendProgram && item.modelCode !== t.modelCode && item.categoryCode !== t.categoryCode))
        if (flag1) {
          equalArr.push(item)
        }
        if (flag2) {
          tmpArr.push(item)
        }
      })
      if (equalArr.length) {
        const msgArr = []
        equalArr.forEach(e => {
          const isEqual = msgArr.every(m => (e.recommendProgram !== m.recommendProgram && e.modelCode !== m.modelCode && e.categoryCode !== m.categoryCode))
          if (isEqual) {
            msgArr.push(e)
          }
        })
        msgArr.forEach(m => {
          this.$message.warning(`所属方案${m.recommendProgram}，型号为${m.modelCode}，品类为${m.categoryCode}的数据已存在，请勿重复添加`)
        })
      }
    },
    selectionChange(rows) {
      this.selections = rows
    }
  }
}
</script>

<style lang="scss" scoped>
// .recommend{

// }
</style>
